<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>航班管理</title>
    <style type="text/css">
        div {
            margin-bottom: 10px;
        }
    </style>
</head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-paginator.js"></script>
<script type="text/javascript">
    $(function () {
        //设置默认值
        $("#leaveCity").val("[[${param.leaveCity}]]")
        $("#arrivalCity").val("[[${param.arrivalCity}]]")
        $("#no").val("[[${param.no}]]")
        $("#company").val("[[${param.company}]]")
        $("#leaveTime").val("[[${param.leaveTime}]]")
        $("#arrivalTime").val("[[${param.arrivalTime}]]")
        //分页查询
        $("#flightPageLabel").bootstrapPaginator({
            currentPage: "[[${flightPage.current == 0 ? 1 : flightPage.current}]]",
            totalPages: "[[${flightPage.pages == 0 ? 1 : flightPage.pages}]]",
            size: "normal",
            alignment: "center",
            onPageClicked: function (event,origialEvent,type,page) {
                $("#pageNo").val(page);
                $("#searchForm").submit();
            }
        })

        //添加航班
        $("#save").click(function () {
            $.ajax({
                type: "post",
                url: "/flight",
                data: $("#flightForm").serialize(),
                dataType: "json",
                success:function (result) {
                    if (result.responseCode == "2001"){
                        location.href = "/flight?pageNo=[[${flightPage.current == 0 ? 1 : flightPage.current}]] "
                    }
                }
            })
        })
    })
    function update() {
        $("#update").attr("data-dismiss", "modal");
    }

    // function save() {
    //     $("#save").attr("data-dismiss", "modal");
    // }

    function modify(id, item) {
        alert(id);
        $(item).attr("data-toggle", "modal");
    }
</script>

<body>
<form id="searchForm" action="/flight" class="bs-docs-example form-search" method="get">
    <font style="font-weight: bold;">查询条件:&nbsp;&nbsp;&nbsp;</font>
    <input type="hidden" name="pageNo" id="pageNo">
    <label for="leaveCity">出发城市：</label>
    <input type="text" id="leaveCity" name="leaveCity" class="input-mini search-query" placeholder="出发城市">
    <label for="arrivalCity">到达城市：</label>
    <input type="text" id="arrivalCity" name="arrivalCity" class="input-mini search-query" placeholder="到达城市">
    <label for="no">航班编号：</label>
    <input type="text" id="no" name="no" class="input-mini search-query" placeholder="航班号">
    <label for="company">航空公司：</label>
    <input type="text" id="company" name="company" class="input-mini search-query" placeholder="航空公司"><br>
    <label class="offset1" for="leaveTime">出发时间：</label>
    <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3"
         data-link-format="hh:ii">
        <input id="leaveTime" name="leaveTime" style="width: 40px;" type="text" value="" readonly> <span class="add-on"><i
            class="icon-remove"></i>
      </span> <span class="add-on"><i class="icon-th"></i>
      </span>
    </div>
    <input type="hidden" id="dtp_input3" value="" />
    <label for="arrivalTime">到达时间：</label>
    <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3"
         data-link-format="hh:ii">
        <input id="arrivalTime" name="arrivalTime" style="width: 40px;" type="text" value="" readonly> <span
            class="add-on"><i class="icon-remove"></i>
      </span> <span class="add-on"><i class="icon-th"></i>
      </span>
    </div>
    <button class="btn" type="submit">查询</button>
</form>
<table style="width: 100%" class="table table-bordered table-hover table-striped">
    <thead>
    <tr>
        <th><a href="#myModal" class="btn" data-toggle="modal">添加航班</a>
        </th>
    </tr>
    <tr>
        <td>ID</td>
        <th>航班号</th>
        <th>航班机型</th>
        <th>总座位数</th>
        <th>出发城市</th>
        <th>到达城市</th>
        <th>时间区间</th>
        <th>航空公司</th>
        <th>价格</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="flight:${flightPage.records}">
        <td th:text="${flight.id}"></td>
        <td th:text="${flight.no}"></td>
        <td th:text="${flight.model}"></td>
        <td th:text="${flight.totalSeats}"></td>
        <td th:text="${flight.leaveCity}"></td>
        <td th:text="${flight.arrivalCity}"></td>
        <td>[[${flight.leaveTime}]]-[[${flight.arrivalTime}]]</td>
        <td th:text="${flight.company}"></td>
        <td>
            <label>经济舱：￥[[${flight.economyPrice}]]</label>
            <label>头等舱：￥[[${flight.firstPrice}]]</label>
        </td>
        <td><label><a href="#myModify" onclick="modify('1',this)">修改</a></label>
            <label><a href="" onclick="return confirm('确定要删除吗？')">删除</a></label>
        </td>
    </tr>
    </tbody>
</table>
<div id="flightPageLabel"></div>
<!-- 	S航班增加的弹出 -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-header">
        <h3 align="center">航班增加</h3>
    </div>
    <div class="modal-body">
        <form id="flightForm" class="bs-docs-example form-horizontal">
            <div class="control-group">

                <label for="no2" class="control-label">航班号</label>
                <div class="controls">
                    <input type="text" placeholder="航班号" id="no2" name="no" required="required">
                </div>
                <label for="company2" class="control-label">航空公司</label>
                <div class="controls">
                    <input type="text" placeholder="航空公司" id="company2" name="company" required="required">
                </div>
                <label for="model" class="control-label">航班机型</label>
                <div class="controls">
                    <input type="text" placeholder="航班机型" id="model" name="model" required="required">
                </div>
                <label for="totalSeats" class="control-label">总座位数</label>
                <div class="controls">
                    <input type="text" placeholder="总座位数" id="totalSeats" name="totalSeats" required="required">
                </div>
                <label for="leaveCity2" class="control-label">出发城市</label>
                <div class="controls">
                    <input type="text" placeholder="出发城市" id="leaveCity2" name="leaveCity" required="required">
                </div>

                <label for="arrivalCity2" class="control-label">到达城市</label>
                <div class="controls">
                    <input type="text" placeholder="到达城市" id="arrivalCity2" name="arrivalCity" required="required">
                </div>

                <label class="control-label">价格</label>
                <div class="controls ">
                    经济舱：￥<input type="text" placeholder="00.00" name="economyPrice" class="span2"><br />
                    头等舱：￥<input type="text" placeholder="00.00" name="firstPrice" class="span2">
                </div>

                <label for="leaveTime2" class="control-label">出发时间</label>
                <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii"
                     data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input id="leaveTime2" name="leaveTime" type="text" value="" readonly>
                    <span class="add-on"> <i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>

                <label for="arrivalTime2" class="control-label">到达时间</label>
                <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii"
                     data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input id="arrivalTime2" name="arrivalTime" type="text" value="" readonly> <span class="add-on"><i
                        class="icon-remove"></i>
            </span> <span class="add-on"><i class="icon-th"></i>
            </span>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button id="save" class="btn btn-primary">添加</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
    </div>
</div>
<!-- 	E航班增加的弹出 -->
<!-- 	S航班修改的弹出 -->
<div id="myModify" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-header">
        <h3 align="center">航班修改</h3>
    </div>
    <div class="modal-body">
        <form class="bs-docs-example form-horizontal">
            <div class="control-group">
                <label for="id" class="control-label">航班ID</label>
                <div class="controls">
                    <input type="text" readonly="readonly" id="id" name="id" value="1">
                </div>
                <label for="no3" class="control-label">航班号</label>
                <div class="controls">
                    <input type="text" id="no3" name="no" value="0001">
                </div>
                <label for="company3" class="control-label">航空公司</label>
                <div class="controls">
                    <input type="text" value="sss" id="company3" name="company" required="required">
                </div>
                <label for="totalSeats3" class="control-label">总座位数</label>
                <div class="controls">
                    <input type="text" placeholder="总座位数" id="totalSeats3" name="totalSeats" required="required">
                </div>
                <label for="leaveCity3" class="control-label">出发城市</label>
                <div class="controls">
                    <input type="text" id="leaveCity3" name="leaveCity" required="required">
                </div>

                <label for="arrivalCity3" class="control-label">到达城市</label>
                <div class="controls">
                    <input type="text" id="arrivalCity3" name="arrivalCity" required="required">
                </div>

                <label class="control-label">价格</label>
                <div class="controls ">
                    经济舱：￥<input type="text" placeholder="00.00" name="economyPrice" class="span2"><br />
                    头等舱：￥<input type="text" placeholder="00.00" name="firstPrice" class="span2">
                </div>

                <label for="leaveTime3" class="control-label">出发时间</label>
                <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii"
                     data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input id="leaveTime3" name="leaveTime" type="text" value="12:22" readonly> <span class="add-on"><i
                        class="icon-remove"></i>
            </span> <span class="add-on"><i class="icon-th"></i>
            </span>
                </div>
                <label for="arrivalTime3" class="control-label">到达时间</label>
                <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii"
                     data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input id="arrivalTime3" name="arrivalTime" type="text" value="22:22" readonly> <span class="add-on"><i
                        class="icon-remove"></i>
            </span> <span class="add-on"><i class="icon-th"></i>
            </span>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button id="update" class="btn btn-primary" onclick="update()">修改</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
    </div>
</div>
<!-- 	E机票修改的弹出 -->
<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
    $('.form_time').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 1
    });
</script>
</body>

</html>